<template>
  <div>
    <el-container style="border: 1px solid #eee">
      <el-header style="text-align: right; font-size: 12px">
        <img
          class="logoimg"
          src="http://likede2-admin.itheima.net/img/logo.3673fab5.png"
          alt=""
        />
        <div class="right-menu">
          <el-row :gutter="20">
            <el-col :span="5"
              ><div class="grid-content bg-purple">
                <img
                  style="vertical-align: middle"
                  src=""
                  alt=""
                /></div
            ></el-col>
            <el-col :span="14"
              ><div
                class="grid-content bg-purple"
                style="height: 60px; line-height: 60px"
              >
                <span>欢迎您，{{ $route.query.username || "admin" }}</span>
              </div></el-col
            >
            <el-col :span="5"
              ><div class="grid-content bg-purple outclass" @click="OutFn">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="退出登录"
                  placement="bottom"
                >
                  <span>
                    退出 <i style="z-index=2" class="el-icon-caret-bottom"></i
                  ></span>
                </el-tooltip></div
            ></el-col>
          </el-row>
        </div>
      </el-header>
      <el-container>
        <el-aside
          class="aside"
          width="200px"
          style="background-color: rgb(248, 250, 253)"
        >
          <el-menu :default-openeds="['1', '3']">
            <el-menu-item index="0" @click="$router.push('/homepage')">
              <i class="iconfont icon-home" style="margin-top: -5px"></i>
              帝可得</el-menu-item
            >
            <el-submenu index="1">
              <template slot="title"
                ><i class="iconfont icon-task"></i>工单管理</template
              >
              <el-menu-item index="1-1">运营工单</el-menu-item>
              <el-menu-item index="1-2">运维工单</el-menu-item>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title"
                ><i class="iconfont icon-gps"></i>点位管理</template
              >
              <el-menu-item index="2-1">区域管理</el-menu-item>
              <el-menu-item index="2-2">点位管理</el-menu-item>
              <el-menu-item index="2-3">合作商管理</el-menu-item>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title"
                ><i class="iconfont icon-vm"></i>设备管理</template
              >
              <el-menu-item index="3-1">区域管理</el-menu-item>
              <el-menu-item index="3-2">设备状态</el-menu-item>
              <el-menu-item index="3-3">设备类型管理</el-menu-item>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title"
                ><i class="iconfont icon-user"></i>人员管理</template
              >
              <el-menu-item index="4-1">人员列表</el-menu-item>
              <el-menu-item index="4-2">人效统计</el-menu-item>
              <el-menu-item index="4-3">工作量列表</el-menu-item>
            </el-submenu>
            <el-submenu index="5">
              <template slot="title"
                ><i class="iconfont icon-sku"></i>商品管理</template
              >
              <el-menu-item index="5-1">商品类型</el-menu-item>
              <el-menu-item index="5-2">商品管理</el-menu-item>
            </el-submenu>
            <el-menu-item index="6">
              <i class="iconfont icon-policy" style="margin-top: -5px"></i>
              策列管理</el-menu-item
            >
            <el-menu-item index="7">
              <i class="iconfont icon-order" style="margin-top: -5px"></i
              >订单管理
            </el-menu-item>
            <el-menu-item index="8">
              <i class="iconfont icon-report" style="margin-top: -5px"></i
              >对账统计
            </el-menu-item>
          </el-menu>
        </el-aside>
        <router-view />
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  created () {},
  methods: {
    OutFn () {
      this.$router.push('/')
    }
  }
}
</script>

<style scoped>
.el-menu {
  padding: 0px;
  width: 180px;
  height: 979px;
  border: 0px solid #000;
}
.iconfont {
  margin-right: 10px;
  font-size: 16px;
  color: black;
}
.aside {
  margin-top: 50px;
}
.outclass {
  cursor: pointer;
}
.el-header .logoimg {
  position: absolute;
  top: 10px;
  left: 15px;
  width: 88px;
  height: 36px;
}
.el-icon-caret-bottom {
  position: absolute;
  right: -8px;
  top: 22px;
}
.right-menu {
  float: right;
  width: 240px;
  height: 60px;
  margin-right: 24px;
  line-height: 60px;
  color: #fff;
  font-size: 16px;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
.el-header {
  height: 60px;
  width: 100%;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1999;
  background-image: url();
  background-size: cover;
  background-repeat: no-repeat;
}
</style>
<style>
body html {
  background-color: rgb(248, 250, 253) !important;
}
* {
  margin: 0;
  padding: 0;
}
</style>
